<template>
  <div class="kg-chat">
    <div class="chat-container">
      <div class="chat-messages" ref="messageContainer">
        <div v-for="(message, index) in messages" :key="index"
          :class="['message', message.type === 'user' ? 'user-message' : 'bot-message']">
          <div class="message-content">
            <div class="avatar">
              <i :class="message.type === 'user' ? 'el-icon-user' : 'el-icon-service'"></i>
            </div>
            <div class="text">{{ message.content }}</div>
          </div>
          <div class="time">{{ message.time }}</div>
        </div>
      </div>

      <div class="chat-input">
        <el-input
          v-model="inputMessage"
          type="textarea"
          :rows="3"
          placeholder="请输入您的问题..."
          @keyup.enter.native="sendMessage"
        ></el-input>
        <el-button type="primary" @click="sendMessage" :loading="loading">
          发送
        </el-button>
      </div>

      <div class="quick-questions">
        <el-tag
          v-for="(question, index) in quickQuestions"
          :key="index"
          @click="askQuickQuestion(question)"
          class="question-tag"
        >
          {{ question }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KGChat',
  data() {
    return {
      messages: [],
      inputMessage: '',
      loading: false,
      quickQuestions: [
        '什么是供应链知识图谱？',
        '供应链知识图谱有哪些应用？',
        '如何构建供应链知识图谱？',
        '供应链知识图谱的关键技术是什么？'
      ]
    }
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) return

      const userMessage = {
        content: this.inputMessage,
        type: 'user',
        time: new Date().toLocaleTimeString()
      }

      this.messages.push(userMessage)
      this.loading = true

      // 这里添加调用后端API的逻辑
      setTimeout(() => {
        const botMessage = {
          content: '供应链知识图谱是一种运用知识图谱技术，将供应链领域的各种实体（如供应商、产品、物流企业等）及其关系（如供应关系、运输关系等）进行结构化表示和关联的知识网络。它通过图数据结构形式，把供应链中的信息和知识进行整合、存储与展示，能帮助企业直观地理解供应链全貌，实现信息快速检索、风险预警、决策支持等功能，提升供应链的透明度、效率和管理水平，是推动供应链数字化转型的重要工具。',
          type: 'bot',
          time: new Date().toLocaleTimeString()
        }
        this.messages.push(botMessage)
        this.loading = false
        this.inputMessage = ''
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }, 1000)
    },
    askQuickQuestion(question) {
      this.inputMessage = question
      this.sendMessage()
    },
    scrollToBottom() {
      const container = this.$refs.messageContainer
      container.scrollTop = container.scrollHeight
    }
  },
  mounted() {
    // 添加欢迎消息
    this.messages.push({
      content: '您好！我是供应链知识图谱助手，请问有什么可以帮助您的？',
      type: 'bot',
      time: new Date().toLocaleTimeString()
    })
  }
}
</script>

<style scoped>
.kg-chat {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
}

.chat-container {
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  margin-bottom: 20px;
}

.message-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar i {
  font-size: 20px;
  color: #909399;
}

.text {
  background-color: #f4f4f5;
  padding: 12px;
  border-radius: 8px;
  max-width: 70%;
}

.user-message .message-content {
  flex-direction: row-reverse;
}

.user-message .text {
  background-color: #ecf5ff;
  color: #409eff;
}

.time {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  text-align: center;
}

.chat-input {
  padding: 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  gap: 10px;
}

.quick-questions {
  padding: 10px 20px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-tag {
  cursor: pointer;
  user-select: none;
}

.question-tag:hover {
  background-color: #ecf5ff;
  color: #409eff;
}
</style>
